<script lang="ts">
import 'swiper/scss';
import "swiper/css/scrollbar";
import "swiper/css/navigation";
import "swiper/css/pagination";
import HomeSearch from '../components/HomeSearch.vue'
import HomeDetect from '../components/HomeDetect.vue';
import HomeSumitomo from '../components/HomeSumitomo.vue';
import { ref, onMounted, computed, watch } from 'vue'
import { Keyboard, Scrollbar, Pagination } from "swiper";
import router from '@/router';
import { cityStore, cityNumStore } from '@/stores/city';
import { articleStore } from '@/stores/article'
import { cityNumber } from '@/api/follow';
import { getArticle } from '@/api/follow'
import { onBeforeRouteLeave } from 'vue-router'
import { scrollStore } from '../stores/scrollTop'
import { showToast } from 'vant';
import { dynamicncStore } from '@/stores/publish'
import { toRaw } from 'vue';
import { informationStore } from '../stores/information'
export default {
    components: {
        HomeSearch,
        HomeDetect,
        HomeSumitomo,
    },
    beforeRouteEnter(to, from, next) {
        if (from.name == 'detail') {
            // 如果在详情页返回到关注页面，获取pinia的值，然后让窗口滚动到指定的值
            setTimeout(function () {
                window.scrollTo({
                    top: scrollStore().$state.scroll,
                    // behavior: "smooth"
                })
            }, 0)
        }
        next()
    },
    setup() {
        let number: any = ref()//地区编码
        onBeforeRouteLeave((to, from, next) => {
            if (to.name == 'detail') {
                // 如果进入的路由的名字为详情页面，记录当前窗口的滚动距离，切改变pinia的值
                scrollStore().$state.scroll = document.documentElement.scrollTop
                // console.log(scrollStore().$state.scroll);
            }
            next()
        })

        let informa = informationStore().$state.information;

        const city = computed(() => cityStore().$state.city)

        watch(city, (newValue, oldValue) => {
            cityNumberFun()
        });
        let getMyarticle = () => {
            let dyna = toRaw(dynamicncStore().$state.dynamicnc);
            console.log(dyna);

            if (dyna.length !== 0) {
                // let myArticle: any = JSON.parse(window.localStorage.getItem('commentList') || '')
                myCommentList.value = dyna.filter((item: any) => {
                    return item.cityNum == number.value
                })

            }
        }
        // let city: string = cityStore().$state.city//获取pinia的地区名字
        let showPage: any = 1;
        let tabSwipeable: any = ref(true);
        let nameList: Array<string> = ['曾祥科', '户云鑫睿', '赖炜锋', '小明', '亚瑟摩根', '哆啦A梦', '野比大雄', '马里奥', '八级大狂风', '路易吉', '库霸王', '断了的Xuan', '吉川裤浪']//用户名字列表
        let commentList = ['cool！', '我真的超爱这个公司的！', '假的假的！', '买家秀和卖家秀！', '设计师我想认识你！', '想问问这个设计师怎样', '你人还怪好捏', '棒棒哒~', '我比这家公司更便宜，建议联系我', '你好，能小刀一下吗', '我上我也行', '能不能便宜点', '来我房间，带你康点好康的']//评论列表
        let articleList: any = ref(null)//文章列表初始化
        const cityNumberFun: () => void = (): void => {//获取城市编码方法
            // console.log('调用了cityNumberFun');

            cityNumber().then((data: any) => {//获取城市列表[{城市名}:'城市编码']
                for (var i in data) {
                    if (Object.keys(data[i])[0] === city.value) {//如果value==city，拿到他的key值就是城市编码
                        number.value = Object.values(data[i])[0]
                    }
                }
                const getArticleFun: () => void = (): void => {//拿到城市编码之后，发送网络请求
                    // console.log(number.value);
                    cityNumStore().$state.cityNum = number.value//改变pinia里面的城市编码,
                    getArticle({ cityCode: number.value }).then((data: any) => {
                        articleList.value = data.result.data;
                        // console.log(localStorage.getItem('commentList') !== null);

                        getMyarticle()
                        articleList.value.forEach((item: any) => {
                            let userCommentList: Array<object> = []//随机数生成的评论列表
                            let userCommentListLength = Math.ceil(Math.random() * 4)//评论数组长度0-4
                            for (let i = 0; i < userCommentListLength; i++) {
                                let commentIndex = Math.ceil(Math.random() * 12)  //评论下标
                                let userIndex = Math.ceil(Math.random() * 12)//用户下标
                                let user: any = {}
                                user[nameList[userIndex]] = commentList[commentIndex]//自定义对象
                                userCommentList.push(user)
                            }
                            item['comment'] = userCommentList
                        })
                        articleStore().$state.article = articleList.value//将当前文章列表存入store里面
                        // console.log(articleList.value);//文章列表
                    })
                }
                getArticleFun()
            })

        }
        const goPage = (path: any, pid: any) => {
            // console.log(pid);
            router.push({
                path,
                query: {
                    pid
                }
            })
        }
        let myCommentList: any = ref(null)
        const count = ref(0);
        const loading = ref(false);
        const onRefresh = () => {
            setTimeout(() => {
                showToast('刷新成功');
                loading.value = false;
                count.value++;
                getMyarticle()
            }, 1000);
        }
        onMounted(() => {
            cityNumberFun()
        })
        let showBottom = ref(false);
        return {
            showPage,
            tabSwipeable,
            showBottom,
            cityNumber,
            articleList,
            goPage,
            modules: [Keyboard, Scrollbar],
            SumitomoSwiper: [Pagination],
            // myArticle,
            number,
            myCommentList,
            count,
            loading,
            onRefresh,
            city,
            informa
        };
    },
}
</script>
<template>
    <div class="Home" ref="home">
        <van-tabs v-model:active="showPage" sticky offset-top="0" animated tabSwipeable duration="0.2" background="#fff"
            lazy-render class="Home-MainTab">
            <!-- 下方搜索框 -->
            <template #nav-bottom>
                <div class="Index-HomeSearch">
                    <HomeSearch></HomeSearch>
                </div>
            </template>
            <!-- 关注页 -->
            <van-tab title="广场" class="Home-Follow">
                <!-- <div class="elect">
                    <div class="elect_title">
                        <h3>推荐住友</h3>
                        <div>
                            <p>查看更多</p>
                            <img src="../assets/images/Home-Icon/ic_arrow_right_new.png" alt="">
                        </div>
                    </div>
                    <div class="elect_con">

                    </div>
                </div> -->
                <!--  -->
                <van-pull-refresh v-model="loading" @refresh="onRefresh">
                    <div v-if="myCommentList" v-for="(item, index) in myCommentList" class="item">
                        <div class="item_title">
                            <div class="left">
                                <img :src="informa.toux.content || informa.toux">
                                <div>
                                    <p>{{informa.nic}}</p>
                                    <span>{{ city }}</span>
                                </div>
                            </div>
                            <span class="right iconfont icon-gengduo"></span>
                        </div>
                        <!-- 内容介绍 -->
                        <div class="txt">
                            <h3>{{ item.title }}</h3>
                            <van-text-ellipsis rows="4" :content="item.content" expand-text="展开" collapse-text="收起" />
                        </div>

                        <div class="image_bottom">
                            <img v-for="(img, index) in item.pics" :key="index" :src="img.content">
                        </div>

                        <!-- 评论内容 -->
                        <div class="criticism" v-if="item.comment">
                            <div class="list" v-for="(comment, index) in  item.comment" :key="index">
                                <img src="../assets/images/Home-Icon/Individual-bs.jpg">
                                <span>{{ Object.keys(comment)[0] }}<i>&nbsp;:&nbsp;</i></span>
                                <p class="one-txt-cut">{{ Object.values(comment)[0] }}</p>
                            </div>
                        </div>

                        <!-- 评论点赞收藏按钮 -->
                        <div class="chatbtn">
                            <div class="fot">一起聊聊...</div>
                            <div class="change review">
                                <img src="../assets/images/Home-Icon/icon_company_consult.png">
                                评论
                            </div>
                            <div class="change collect">
                                <img src="../assets/images/Home-Icon/ich_star_not_fav.png">
                                收藏
                            </div>
                            <div class="change upvote">
                                <img src="../assets/images/Home-Icon/icon_like_n.png">
                                点赞
                            </div>
                        </div>
                    </div>
                    <div v-if="articleList" class="item" v-for="(item, index) in articleList.slice(0, 5)">
                        <div class="item_title" @click="goPage('/detail', item.id)">
                            <div class="left">
                                <img :src="item.caseDetail.designerPicUrl + '?x-oss-process=image/format,webp'">
                                <div>
                                    <p>{{ item.caseDetail.designerName }}{{ item.id }}</p>
                                    <span>{{ item.caseDetail.belongToShop }}</span>
                                </div>
                            </div>
                            <span class="right iconfont icon-gengduo"></span>
                        </div>

                        <div class="image_top" @click="goPage('/detail', item.id)">
                            <img :src="item.picUrl + '?x-oss-process=image/format,webp'">
                        </div>

                        <!-- 内容介绍 -->
                        <div class="txt">
                            <h3>{{ item.caseDetail.caseName }}</h3>
                            <van-text-ellipsis rows="4" :content="item.caseDetail.designNote" expand-text="展开"
                                collapse-text="收起" />
                        </div>
                        <!-- 评论内容 -->
                        <div class="criticism">
                            <div class="list" v-for="(comment, index) in  item.comment" :key="index">
                                <img src="../assets/images/Home-Icon/Individual-bs.jpg">
                                <span>{{ Object.keys(comment)[0] }}<i>&nbsp;:&nbsp;</i></span>
                                <p class="one-txt-cut">{{ Object.values(comment)[0] }}</p>
                            </div>

                        </div>
                        <!-- 评论点赞收藏按钮 -->
                        <div class="chatbtn">
                            <div class="fot">一起聊聊...</div>
                            <div class="change review">
                                <img src="../assets/images/Home-Icon/icon_company_consult.png">
                                评论
                            </div>
                            <div class="change collect">
                                <img src="../assets/images/Home-Icon/ich_star_not_fav.png">
                                <!-- <img src="../assets/images/Home-Icon/ich_star_fav.png"> -->
                                收藏
                            </div>
                            <div class="change upvote">
                                <img src="../assets/images/Home-Icon/icon_like_n.png">
                                <!-- <img src="../assets/images/Home-Icon/icon_like_s.png"> -->
                                点赞
                            </div>
                        </div>
                    </div>
                    <div v-if="articleList" class="item" v-for="(item, index) in articleList.slice(5)">
                        <div class="item_title" @click="goPage('/detail', item.id)">
                            <div class="left">
                                <img :src="item.caseDetail.designerPicUrl + '?x-oss-process=image/format,webp'">
                                <div>
                                    <p>{{ item.caseDetail.designerName }} {{ item.id }}</p>
                                    <span>{{ item.caseDetail.belongToShop }}</span>
                                </div>
                            </div>
                            <span class="right iconfont icon-gengduo"></span>
                        </div>
                        <!-- 内容介绍 -->
                        <div class="txt">
                            <h3 @click="goPage('/detail', item.id)">{{ item.caseDetail.caseName }}</h3>
                            <van-text-ellipsis rows="4" :content="item.caseDetail.designNote" expand-text="展开"
                                collapse-text="收起" />
                        </div>

                        <div class="image_bottom">
                            <img v-for="(img, index) in item.caseDetail.spaceDetails" :key="index"
                                :src="img.picUrl + '?x-oss-process=image/format,webp'">
                        </div>

                        <!-- 评论内容 -->
                        <div class="criticism">
                            <div class="list" v-for="(comment, index) in  item.comment" :key="index">
                                <img src="../assets/images/Home-Icon/Individual-bs.jpg">
                                <span>{{ Object.keys(comment)[0] }}<i>&nbsp;:&nbsp;</i></span>
                                <p class="one-txt-cut">{{ Object.values(comment)[0] }}</p>
                            </div>

                        </div>

                        <!-- 评论点赞收藏按钮 -->
                        <div class="chatbtn">
                            <div class="fot">一起聊聊...</div>
                            <div class="change review">
                                <img src="../assets/images/Home-Icon/icon_company_consult.png">
                                评论
                            </div>
                            <div class="change collect">
                                <img src="../assets/images/Home-Icon/ich_star_not_fav.png">
                                收藏
                            </div>
                            <div class="change upvote">
                                <img src="../assets/images/Home-Icon/icon_like_n.png">
                                点赞
                            </div>
                        </div>
                    </div>
                </van-pull-refresh>
            </van-tab>
            <!-- 发现页 -->
            <van-tab title="发现">
                <HomeDetect></HomeDetect>
            </van-tab>
            <!-- 住友圈页 -->
            <van-tab title="住友圈">
                <HomeSumitomo></HomeSumitomo>
            </van-tab>
            <!-- 大分类右侧图标 -->
            <template #nav-right>
                <div class="Index-message">
                    <i class="iconfont icon-jurassic_info"></i>
                </div>
            </template>
        </van-tabs>
        <!-- 上传发布按钮 -->
        <div class="upload_btn" @click="$router
            .push({ path: '/RreleaseView' })">
            <img src="../assets/images/Home-Icon/ic_publish_home.png">
        </div>
    </div>
</template>
<style lang="scss" scoped>
.Home {
    position: relative;
    background: #f5f5f5;
    height: 100vh;

    :deep(.Home-MainTab) {
        div {
            .van-sticky {
                div {
                    .van-tabs__wrap {
                        >.van-tabs__nav {
                            padding: 0 20%;

                            >.van-tabs__line {
                                display: none;
                            }

                            .van-tab--active {
                                transition: all 0.2s;
                                font-size: 16px;
                            }
                        }
                    }

                    .Index-HomeSearch {
                        padding: 5px 0;
                        background: #fff;
                    }
                }
            }
        }





    }

    .Index-message {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
    }

    .van-tabs__content {
        .Home-Follow {
            background-color: #e3e3e3;
            color: #000;
            box-sizing: border-box;
            overflow: hidden;

            .elect {
                padding: 12px;
                padding-bottom: 15px;
                background-color: #fff;

                .elect_title {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 8px;

                    h3 {
                        font-size: 16px;
                        font-weight: 600;
                    }

                    div {
                        font-size: 14px;
                        color: #898989;
                        display: flex;
                        align-items: center;

                        img {
                            width: 10px;
                            height: 15px;
                            display: block;
                        }
                    }
                }

                .elect_con {
                    width: 100%;
                    height: 150px;
                    background-color: red;
                }
            }

            .item {
                margin-top: 8px;
                background-color: #fff;

                .item_title {
                    padding: 10px 12px;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .left {
                        display: flex;

                        img {
                            width: 45px;
                            height: 45px;
                            display: block;
                            border-radius: 50%;
                        }

                        div {
                            margin-left: 15px;
                            font-size: 14px;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;

                            p {
                                font-weight: 700;
                            }
                        }
                    }
                }

                .image_top {
                    width: 100%;
                    height: 130px;

                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }

                .txt {
                    margin-top: 10px;
                    padding: 0px 12px;

                    h3 {
                        font-size: 16px;
                        font-weight: 700;
                        margin-bottom: 10px;
                    }

                    .van-text-ellipsis {
                        font-size: 14px;

                        & ::v-deep .van-text-ellipsis__action {
                            color: #12c1b6;
                        }
                    }
                }

                .image_bottom {
                    padding: 0px 12px;
                    margin-top: 10px;
                    display: flex;
                    flex-wrap: wrap;

                    img {
                        width: 112px;
                        height: 112px;
                        margin-bottom: 7px;
                        margin-right: 7px;
                        border-radius: 5px;

                        &:nth-child(3n) {
                            margin-right: 0px;
                        }
                    }
                }

                .criticism {
                    margin: 0 12px;
                    background-color: #e9ecf0;
                    margin-top: 10px;
                    padding: 1px 0px;
                    border-radius: 3px;

                    .list {
                        display: flex;
                        margin: 4px 5px;

                        img {
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                        }

                        span {
                            font-size: 13px;
                            color: #898989;
                        }

                        p {
                            color: #3d3d3d;
                            max-width: 184px;
                        }
                    }

                }

                .chatbtn {
                    display: flex;
                    align-items: center;
                    padding: 0px 12px;
                    margin-top: 15px;
                    padding-bottom: 20px;

                    .fot {
                        flex: 1;
                        background-color: #e9ecf0;
                        margin-right: 20px;
                        border-radius: 20px;
                        padding: 4px 0px;
                        padding-left: 10px;
                        font-size: 14px;
                        color: #898989;
                    }

                    .change {
                        margin: 0px 5px;
                        padding-left: 20px;
                        font-size: 14px;
                        position: relative;

                        img {
                            width: 20px;
                            height: 20px;
                            display: block;
                            position: absolute;
                            top: 0;
                            left: 0;
                        }
                    }
                }
            }
        }



    }

    .upload_btn {
        width: 40px;
        height: 40px;
        position: fixed;
        bottom: 90px;
        right: 20px;

        img {
            width: 100%;
            height: 100%;
            display: block;
        }
    }

    .van-popup {
        .pop_head {
            height: 48px;
            border-bottom: 1px solid #ccc;
            line-height: 48px;
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            position: relative;

            img {
                width: 20px;
                height: 20px;
                display: block;
                position: absolute;
                right: 15px;
                top: 12px;
            }
        }

        .pop_list {
            margin: 10px 12px 20px 12px;
            box-sizing: border-box;

            .pop_message {
                display: flex;
                align-items: center;

                .pop_message_left {
                    display: flex;
                    flex: 1;

                    img {
                        width: 40px;
                        height: 40px;
                        display: block;
                        border-radius: 50%;
                    }

                    div {
                        margin-left: 15px;
                        font-size: 14px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        p {
                            color: #898989;
                        }

                        span {
                            font-size: 12px;
                            color: #898989;
                        }
                    }
                }

                .pop_message_right {
                    width: 20px;
                    height: 40px;
                    position: relative;

                    img {
                        width: 20px;
                        height: 20px;
                        display: block;
                        position: absolute;
                        top: 10px;
                        left: 0;
                    }
                }
            }

            .pop_txt {
                margin-left: 52px;
                margin-top: 10px;
            }
        }

        .pop_end {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ccc;
            font-size: 12px;

            i {
                margin: 0px 6px;
                margin-top: -6px;
            }
        }

        .pop_foot {
            width: 100%;
            height: 48px;
            border-top: 1px solid #ccc;
            position: fixed;
            right: 0;
            left: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            padding: 0 12px;
            box-sizing: border-box;

            .foot_left {
                flex: 1;
                margin: 10px 0px;
                font-size: 14px;

                input {
                    padding: 4px 12px;
                    padding-right: 60px;
                    box-sizing: border-box;
                    border-radius: 20px;
                    width: 100%;
                    height: 100%;
                    background-color: #e3e3e3;

                }
            }

            span {
                margin-left: 20px;
                color: #12c1b6;
            }
        }
    }
}
</style>